<template>
    <view>
        <view class="content">
            <view class="list-view-tick">
                <view class="item">
                    <view class="top-title">ume影城（重庆三峡广场店）</view>
                    <view class="title">战斗天使阿丽塔 2张</view>
                    <view class="role-content">2019年11月11日 12:00:00</view>
                    <view class="scene-content">1号厅 | E排9号 E排10号</view>
                    <image
                        class="img"
                        src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575454802250&di=b6201362df15f1968ec242482f172a54&imgtype=0&src=http%3A%2F%2Fpic.qiantucdn.com%2F58pic%2F19%2F41%2F70%2F82q58PIC4GH_1024.jpg"
                    />
                    <view class="bottom-container">
                        <p>总价：25元</p>
                        <p>已完成</p>
                    </view>
                    <div class="circle circle-left"></div>
                    <div class="circle circle-right"></div>
                </view>
            </view>
            <view class="list-view-tick">
                <view class="item">
                    <view class="top-title">ume影城（重庆三峡广场店）</view>
                    <view class="title">战斗天使阿丽塔 2张</view>
                    <view class="role-content">2019年11月11日 12:00:00</view>
                    <view class="scene-content">1号厅 | E排9号 E排10号</view>
                    <image
                        class="img"
                        src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575454802250&di=b6201362df15f1968ec242482f172a54&imgtype=0&src=http%3A%2F%2Fpic.qiantucdn.com%2F58pic%2F19%2F41%2F70%2F82q58PIC4GH_1024.jpg"
                    />
                    <view class="bottom-container">
                        <p>总价：25元</p>
                        <p>已完成</p>
                    </view>
                    <div class="circle circle-left"></div>
                    <div class="circle circle-right"></div>
                </view>
            </view>
        </view>
        <footerMenu />
    </view>
</template>
<script>
import footerMenu from "../components/footer";
export default {
    components: {
        footerMenu
    },
    data() {
        return {
            captchaImg: "",
            tabType: 1,
            areaList: [1, 2, 3]
        };
    },
    onLoad() {},
    methods: {
        btnLogin() {
            uni.redirectTo({
                url: "/pages/index/index"
            });
            // var self = this
            // 	self.$api.ajax({
            //     	url:'/address/getAllArea',
            //     	method:'GET',
            //     	success:function(res){
            // 				console.log(res);
            // 				self.areaList =res.items;
            //     	}
            //   })
        },
        changeTab(type) {
            this.tabType = type;
        }
    }
};
</script>

<style  lang="scss" scoped>
.content {
    overflow-y: scroll;
    height: px2vw(600);
}
.index-header {
    text-align: center;
    height: px2vw(245);
    width: 100%;
    background: #333;
    position: relative;
    border-bottom-left-radius: px2vw(15);
    border-bottom-right-radius: px2vw(15);
    .user-info {
        position: absolute;
        left: px2vw(15);
        top: px2vw(80);
        color: #fff;
        font-size: px2vw($fz18);
    }
    .p-bgimg {
        border-radius: px2vw(10);
        height: px2vw(165);
        width: px2vw(345);
        position: absolute;
        left: 50%;
        bottom: -px2vw(50);
        margin-left: -px2vw(172.5);
        background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575454802250&di=b6201362df15f1968ec242482f172a54&imgtype=0&src=http%3A%2F%2Fpic.qiantucdn.com%2F58pic%2F19%2F41%2F70%2F82q58PIC4GH_1024.jpg");
        background-position: center;
        background-size: cover;
        box-shadow: 0 px2vw(4) px2vw(30) #888;
    }
}
.list-view-tick {
    width: px2vw(355);
    margin: px2vw(20) auto auto auto;
    &:last-child {
        margin-bottom: px2vw(80);
    }
    .item {
        width: px2vw(355);
        height: px2vw(210);
        margin: 0 auto;
        position: relative;
        border-radius: px2vw(10);
        background-color: #fff;
        box-shadow: 0 px2vw(4) px2vw(30) #d8d3d3;
        .top-title {
            height: px2vw(44);
            line-height: px2vw(44);
            font-size: px2vw($fz14);
            padding-left: px2vw(10);
            // background-color: #fffbeb;
            border-top-left-radius: px2vw(10);
            border-top-right-radius: px2vw(10);
            border-bottom: px2vw(1) dashed #ddd;
        }
        .title {
            font-size: px2vw($fz18);
            font-weight: 600;
            position: absolute;
            top: px2vw(65);
            left: px2vw(100);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: px2vw(180);
        }
        .scene-content,
        .role-content {
            font-size: px2vw($fz14);
            position: absolute;
            top: px2vw(96);
            left: px2vw(100);
            color: #888;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: px2vw(180);
        }
        .scene-content {
            top: px2vw(120);
            font-size: px2vw($fz12);
        }
        .btn-box {
            font-size: px2vw($fz16);
            position: absolute;
            top: px2vw(140);
            left: px2vw(100);
            color: #f24244;
            border: px2vw(1.2) solid #f24244;
            text-align: center;
            border-radius: px2vw(5);
            height: px2vw(25);
            line-height: px2vw(25);
            padding: 0 px2vw(10);
        }
        .next-cat {
            font-size: px2vw($fz14);
            position: absolute;
            top: px2vw(170);
            left: px2vw(118);
            color: #f24244;
            text-align: center;
        }
        .img {
            height: px2vw(85);
            width: px2vw(60);
            position: absolute;
            top: px2vw(60);
            left: px2vw(18);
            border-radius: px2vw(10);
        }
        .bottom-container {
            height: px2vw(44);
            line-height: px2vw(44);
            font-size: px2vw($fz14);
            position: absolute;
            bottom: 0;
            width: px2vw(345);
            padding-left: px2vw(10);
            border-bottom-left-radius: px2vw(10);
            border-bottom-right-radius: px2vw(10);
            border-top: px2vw(1) dashed #ddd;
            p {
                float: left;
                &:nth-child(1) {
                    width: 80%;
                }
                &:nth-child(2) {
                    width: 20%;
                    color: $c-light;
                }
            }
        }
        .circle {
            width: px2vw(20);
            height: px2vw(10);
            position: absolute;
            margin: auto;
            top: px2vw(40);
            background-color: #f5f5f5;
            border-radius: 50px 50px 0 0;
        }
        .circle-left {
            -ms-transform: rotate(90deg); /* IE 9 */
            -moz-transform: rotate(90deg); /* Firefox */
            -webkit-transform: rotate(90deg); /* Safari 和 Chrome */
            -o-transform: rotate(90deg); /* Opera */
            left: -1.33333vw;
        }
        .circle-right {
            -ms-transform: rotate(-90deg); /* IE 9 */
            -moz-transform: rotate(-90deg); /* Firefox */
            -webkit-transform: rotate(-90deg); /* Safari 和 Chrome */
            -o-transform: rotate(-90deg); /* Opera */
            right: -1.33333vw;
        }
    }
}
.f-tab {
    display: flex;
    width: px2vw(355);
    margin: 0 auto;
    position: relative;
    .item {
        height: px2vw(30);
        line-height: px2vw(30);
        font-size: px2vw($fz18);
        font-weight: 600;
        color: #888;
        padding-left: px2vw(15);
    }
    .on {
        color: #333;
    }
    .c-line-item {
        padding: 0 px2vw(10);
        border-right: px2vw(0.5) solid #ddd;
        height: px2vw(20);
        margin-top: px2vw(5);
    }
    .i-color {
        background-color: #fa9529;
        height: px2vw(16);
        width: px2vw(8);
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -px2vw(8);
    }
    .btn-right {
        position: absolute;
        right: 0;
        top: 0;
        height: px2vw(30);
        line-height: px2vw(30);
        font-size: px2vw($fz14);
        .right-img {
            height: px2vw(20);
        }
    }
}

.c-list {
    width: px2vw(355);
    margin: 0 auto;
    .item {
        height: px2vw(140);
        width: 100%;
        position: relative;
        color: #000;
        .img {
            height: px2vw(95);
            width: px2vw(70);
            border-radius: px2vw(8);
            position: absolute;
            top: px2vw(25);
            left: 0;
        }
        .title {
            font-size: px2vw($fz18);
            font-weight: 600;
            position: absolute;
            top: px2vw(25);
            left: px2vw(85);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: px2vw(180);
        }
        .role {
            font-size: px2vw($fz12);
            position: absolute;
            top: px2vw(55);
            left: px2vw(85);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: px2vw(180);
        }
        .price,
        .scene-content,
        .role-content {
            font-size: px2vw($fz12);
            position: absolute;
            top: px2vw(54);
            left: px2vw(85);
            color: #888;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: px2vw(180);
        }
        .scene-content {
            top: px2vw(73);
        }
        .price {
            top: px2vw(100);
            font-size: px2vw($fz18);
            color: #ff5400;
            font-weight: 600;
            .unit {
                font-size: px2vw($fz12);
            }
        }
        .b-line {
            border: px2vw(0.5) solid #eee;
            position: absolute;
            bottom: 0;
            right: 0;
            width: px2vw(275);
        }
        .btn-buy {
            background-color: #f24244;
            height: px2vw(30);
            line-height: px2vw(30);
            width: px2vw(65);
            border-radius: px2vw(25);
            box-shadow: 0 px2vw(0.5) px2vw(2) #d2383a;
            position: absolute;
            right: 0;
            top: 50%;
            margin-top: -px2vw(15);
            text-align: center;
            font-size: px2vw($fz16);
            color: #fff;
        }
    }
}
</style>
